<template>
  <div>御剑乘风来,除魔天地间!===login
    <form>
      <div>
        <label>用户名</label>
        <input type="text" v-model="form.username" placeholder="请输入用户名">
      </div>
      <div>
        <label>密码</label>
        <input type="text" v-model="form.password" placeholder="请输入密码">
      </div>
      <input type="button" value="登录" @click="loginBtn">
    </form>
  </div>
</template>
           
<script>
import { loginApi } from '@/api'
import _ from 'lodash'

import  transRouter  from  '@/utils/import.js'
export default {
  data() {
    return {
      form: {
        username: 'admin',
        password: '123456'
      }
    }
  },
  methods: {
    loginBtn() {
      loginApi(this.form).then(res => {
        console.log(res, 33333)
        /* 使用loadash将权限深拷贝 */
        const resClone = _.cloneDeep(res.data.roles)
        /* 将组件不转换成一个函数 */
        // resClone.forEach(item => {
        //   item.component = () => import('@/rights/' + item.component + '.vue')
        // })
        resClone.forEach(item => {
          item.component = transRouter.transRouter(item.component)
        })
        console.log(resClone, 44444)

        /* 使用动态添加路由 */
        this.$router.addRoutes(resClone)

        localStorage.setItem('menus', JSON.stringify(res.data.roles))

        this.$router.push('/home')
      })
    }
  }
}
</script>
<style scoped>
</style>